import React, { useEffect, useState } from 'react';
// import styled, { keyframes } from 'styled-components';
// import './AnimatedComponent.css';
import styles from './downloadProcessBar.module.css';

// // 定义关键帧
// const widthAnimation = keyframes(`
//   0% {
//     width: 0;
//   }
//   100% {
//     width: 100%;
//   }
// `);

// // 使用styled-components创建动画样式
// const AnimatedDiv = styled.div(`
//   width: 0;
//   height: 50px; /* 设置一个高度，以展示动画效果 */
//   background-color: blue;
//   animation: ${widthAnimation} 15s linear; /* 应用动画 持续15秒 线性变化 */
// `);

export default function DownloadProcessBar({ onAnimationFinish }) {

    const [count, setCount] = useState(1);

    useEffect(() => {
        const interval = setInterval(() => {
            if (count < 100) {
                setCount(count + 1);
            }
        }, 150); // 将间隔设置为 150 毫秒

        // 清理定时器
        return () => clearInterval(interval);
    }, [count]);

    const onHandleAnimationEnd = () => {
        console.log("====onHandleAnimationEnd");
        setTimeout(() => {
            onAnimationFinish && onAnimationFinish();
        }, 600)
    };

    return (
        <div className={styles.animatedBg}>
            <div className={styles.animatedTracker}>
                <div className={styles.animatedProcess} onAnimationEnd={onHandleAnimationEnd}></div>
            </div>
            <div className={styles.animatedDivCount}>{count}%</div>
        </div>
    );
};
